﻿<template>
    <div class="eg-login-body"
         v-loading="!config">
        <div class="eg-login-box" v-if="config">
            <h1 class="eg-login-title">{{GLOBAL.SYSTEM_NAME}}<sup>&copy;</sup></h1>
            <el-card class="box-card"
                     v-loading="loading"
                     element-loading-text="正在登录..."
                     element-loading-spinner="el-icon-loading">
                <div slot="header">
                    <el-row>
                        <el-col :span="12">
                            {{$l('AbpAccount.Login')}}
                        </el-col>
                        <el-col :span="12"
                                style="text-align:right">
                            <el-dropdown @command="onLanguageChange">
                                <span class="el-dropdown-link">
                                    {{config.localization.currentCulture.nativeName}}<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item v-for="(item,index) in config.localization.languages"
                                                      :key="index"
                                                      :command="item.cultureName">{{item.displayName}}</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </el-col>
                    </el-row>
                </div>
                <div>
                    <div class="eg-login-msg">
                        {{msg}}
                    </div>
                    <div class="eg-login-form-item">
                        <el-input placeholder="请输入账号"
                                  v-model="formData.username"
                                  size="small"
                                  @keyup.enter.native="onLogin">
                            <template slot="prepend">
                                <i class="eg-icon el-icon-user"></i>
                            </template>
                        </el-input>
                    </div>
                    <div class="eg-login-form-item">
                        <el-input placeholder="请输入密码"
                                  type="password"
                                  v-model="formData.password"
                                  size="small"
                                  @keyup.enter.native="onLogin">
                            <template slot="prepend">
                                <i class="eg-icon el-icon-lock"></i>
                            </template>
                        </el-input>
                    </div>
                    <div class="eg-login-form-item" style="text-align:right;">
                        <el-button type="primary"
                                   @click="onLogin"
                                   size="small"
                                   style="padding-left:30px;padding-right:30px;">登录</el-button>
                    </div>
                </div>
            </el-card>
        </div>
    </div>

</template>

<script>
    export default {
        data: function () {
            return {
                formRules: {
                    username: [
                        { required: true, message: '账号不能为空' }
                    ],
                    password: [
                        { required: true, message: '密码不能为空' }
                    ]
                },
                formData: {
                    'client_id': 'BangleAbp_App',
                    'client_secret': '1q2w3e*',
                    'grant_type': 'password',
                    'username': 'admin',
                    'password': '1q2w3E*'
                },
                loading: false,
                msg: '',

                messages: {
                    en: {
                        message: {
                            hello: '{msg} world'
                        }
                    }
                },

                config: undefined,
            }
        },
        mounted() {
            var self = this;

            self.getConfiguration();
        },
        methods: {
            onLogin: function () {
                var self = this;

                if (self.formData.account === '') {
                    self.msg = '你还没有输入帐号！';
                    return;
                }
                if (self.formData.password === '') {
                    self.msg = '你还没有输入密码！';
                    return;
                }

                self.loading = true;

                self.$store.commit('setToken', undefined);

                self.$http
                    .postForm(self.GLOBAL.IDENTITY_SERVER + '/connect/token', self.formData)
                    .then((res) => {
                        self.$store.commit('setToken', res);

                        self.getConfiguration(() => {
                            setTimeout(function () {
                                self.$goRoute('/Home');
                            }, 100);
                        });
                        //self.getUserInfo();
                    })
                    .catch((err) => {
                        if (err && err.data && err.data.error_description) {
                            self.msg = err.data.error_description;
                        } else {
                            self.msg = err;
                        }
                        self.loading = false;
                    });
            },
            getUserInfo() {
                var self = this;

                //self.$http
                //    .get(self.GLOBAL.IDENTITY_SERVER + '/connect/userinfo', {})
                //    .then(function (res) {
                //        self.$store.commit('setUserInfo', res);

                //        setTimeout(function () {
                //            self.$goRoute('/Home');
                //        }, 100);
                //    });
            },
            getConfiguration(callback) {
                var self = this;
                self.$http
                    .get('/api/abp/application-configuration', {})
                    .then(function (res) {
                        self.config = res;

                        self.$store.commit('setConfiguration', res);

                        if (callback) {
                            callback();
                        }
                    });
            },
            onLanguageChange(command) {
                var self = this;
                //self.$http
                //    .get('/Abp/Languages/Switch', {
                //        culture: command,
                //        uiCulture: command
                //    })
                //    .then(function (res) {
                //        self.getConfiguration();
                //    });
                //window.location.href = '/Abp/Languages/Switch?culture=' + command;
                var _url = '/Abp/Languages/Switch?culture=' + command + '&uiCulture=' + command + '&returnUrl=' + window.location.href;
                window.location.href = _url;
            }
        }
    }
</script>

<style scoped>
    .eg-login-body {
        /*background: url(/theme/img/login_bg.gif);*/
        background: url(http://cones.yongligebao.com/admin/theme/img/login_bg.jpg);
        background-size: cover;
        background-position: center;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .eg-login-box {
        width: 400px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
    }

    .eg-login-title {
        color: #fff;
        text-align: center;
        margin-bottom: 40px;
    }

        .eg-login-title sup {
            font-size: 18px;
            font-style: normal;
            position: absolute;
            margin-left: 10px;
        }

    .eg-login-form-item {
        margin-bottom: 10px;
    }

        .eg-login-form-item i.eg-icon {
            font-size: 20px;
        }

    .eg-login-msg {
        color: #e15f63;
        font-size: 13px;
        margin-bottom: 10px;
    }
</style>